<template>
  <el-dialog
    class="dia-style"
    title="新增"
    :visible.sync="open"
    :modal-append-to-body="false"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="10px"
      label-position="left"
      style="padding-left: 97px; padding-top: 50px"
    >
      <!-- 工单/事项名称 -->
        <el-form-item
          label="评估任务名称:"
          prop="name"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.name"
            size="small"
            style="width: 370px"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item
          label="评估模型:"
          prop="name"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.name"
            size="small"
            style="width: 370px"
            placeholder="请选择"
          ></el-input>
        </el-form-item>
      <!-- 关联单位 -->
        <!-- label-width="320px"表头的宽度 -->
        <el-form-item
          label="评估单位:"
          :label-width="formLabelWidth"
          prop="sort"
        >
          <el-select
            v-model="form.sort"
            placeholder="请选择"
            style="width: 370px"
            show-asterisk="true"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      <!-- 生成方式 -->
      <el-form-item
        label="执行方式:"
        :label-width="formLabelWidth"
        style="padding-left: 10px"
      >
        <el-radio v-model="radio" label="1">周期性执行</el-radio>
        <el-radio v-model="radio" label="2">定期执行</el-radio>
      </el-form-item>
    <!-- 时间表 -->
          <el-form-item label="" prop="PerformConfiguration">
            <div class="son-panel" style="width: 340px; margin-left: 35px">
              <span style="margin-left: 85px; margin-right:10px;font-size: 14px"
                >每
              </span>
              <el-form-item prop="cycleTime">
                <el-input-number
                  v-model="formData.cycleTime"
                  style="margin: 0 10px 0 0; width: 88px"
                  controls-position="right"
                  :min="15"
                  :max="60"
                  size="small"
                  placeholder="15"
                />
              </el-form-item>
              <el-form-item prop="cycleNode">
                <el-select
                  v-model="formData.cycleNode"
                  placeholder="分钟"
                  style="width: 88px; height: 28px"
                >
                  <el-option
                    v-for="item in cycleNodeOption"
                    :key="item.itemVale"
                    :label="item.itemLabel"
                    :value="item.itemVale"
                  />
                </el-select>
              </el-form-item>

              <el-form-item>
                <div style="margin: 2px 10px; width: 150px; font-size: 14px">
                  执行一次
                </div>
              </el-form-item>
              
            </div>
          </el-form-item>
          <!-- 说明 -->
            <!-- 预警规则说明 -->
             <el-col :span="24">
        <el-form-item
          label="评估任务名称:"
          :label-width="formLabelWidth"
        >
          <el-input
          type="textarea"
            v-model="form.name"
            size="small"
            style="width: 500px,height:100px"
            :rows="2"
            placeholder=""
          ></el-input>
        </el-form-item>
      </el-col>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">保 存</el-button>
    </div>
  </el-dialog>
</template>
<script>
// import { addDictClassify, updateDictClassify } from '@/api/milkyway/dictManager'
export default {
  props: {
    title: {
      type: String,
      default() {
        return "下发风险预警";
      },
    },
  },
  data() {
    return {
      cycleNodeOption:[],
      checked: true,
      radio: "1",
      form: {
        name: "",
        region: "",
        sort: [],
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      // 是否显示弹出层
      open: false,
      // 标题宽度
      labelWidth: "100",
      // 是否显示按钮
      btnHidden: true,
      // 表单项配置
      formLabelWidth: "120px",
      // 表单校验
      rules: {
        name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
        sort: [{ required: true, message: "", trigger: "blur" }],
      },
    };
  },
  computed: {
    formData: {
      get() {
        return this.form;
      },
      set(val) {},
    },
  },
  watch: {},
  created() {},
  methods: {
    show() {
      this.open = true;
      this.reset();
    },
    /** 提交按钮 */
    async submitForm() {
      this.open = false;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        id: undefined,
        code: undefined,
        createDate: undefined,
        flag: undefined,
        isDeleted: undefined,
        modifiedDate: undefined,
        name: undefined,
        sort: undefined,
      };
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .dia-style .el-dialog .el-dialog__body {
  padding: 55px;
}
::v-deep .dia-style .el-dialog .el-dialog__body {
  padding: 55px !important;
}

::v-deep .el-icon-date:before {
  // content: "";
  margin-left: 339px;
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 15px;
}
::v-deep .el-textarea__inner {
  resize: none;
}
::v-deep {
  
  .el-dialog__body {
    height: auto !important;
  }
  .el-dialog__footer {
    position: absolute;
    bottom: 0;
  }
}
::v-deep .el-textarea__inner {
  width: 635px;
  height: 150px;
}
::v-deep [data-v-251e1f3b] .el-textarea__inner {
    width: 100%;
    height: 101px;
}
.son-panel {
  display: flex !important;
}
</style>
